import React from 'react';
import DynamicAntdTheme from 'dynamic-antd-theme';
import { generateThemeColor, changeAntdTheme } from 'mini-dynamic-antd-theme';

const DynamicTheme = ()=> {
    return (<>
        {/*  方式一 */}
        <div>
           mini型：
        <span
                style={{
                    display: 'inline-block', width: '30px', height: '30px',
                    background: 'pink'
                }}
                onClick={
                    () => changeAntdTheme(
                        generateThemeColor('pink')
                    )
                }
            />
            <span
                style={{
                    display: 'inline-block', width: '30px', height: '30px',
                    background: 'green'
                }}
                onClick={
                    () => changeAntdTheme(
                        generateThemeColor('green')
                    )
                }
            />
        </div>

        {/* 方式二：实在是太简单太好用了 */}
        <div className='theme-container'>
            <span>拾色器: </span>
            <DynamicAntdTheme />
        </div>
    </>);
}

export default DynamicTheme;